<template>
  <div>
    <div class="store-list">
      <h3>店铺列表</h3>
    </div>

    <el-table
      ref="singleTable"
      :data="tableData"
      class="store-table"
      style="width: 100%"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      @expand-change="handleExpandChange"
    >
      <el-table-column label="首页截图">
        <template v-slot="{ row }">
          <img :src="row.storeSyjt" alt />
        </template>
      </el-table-column>
      <el-table-column property="storeName" label="店名/昵称"></el-table-column>
      <el-table-column property="storeDpzh" label="店账号/ID"></el-table-column>
      <el-table-column property="storeFlag" label="标记"></el-table-column>
      <el-table-column property="storeOrSellerFlag" label="派单方式">
        <template v-slot="{ row }">{{ row.storeOrSellerFlag === 1 ? '店铺' : '商家' }}</template>
      </el-table-column>
      <el-table-column property="storeFgsj" label="复购时间(天)" width="100"></el-table-column>
      <el-table-column property="validateStatus" label="审核状态"></el-table-column>
      <el-table-column label="操作" width="200px" fixed="right">
        <template>
          <div class="settings">
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="success" size="mini">添加子店铺</el-button>
            <el-button type="danger" size="mini">注销</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页功能 -->
    <el-pagination
      :current-page="pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      totalCount: 0
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const { data } = await this._axios.post(
        `/store/findpagebyparam?page=${this.pageNum}&size=${this.pageSize}`,
        {
          beginDate: '',
          endDate: '',
          keyword: '',
          storeOrSellerFlag: 1,
          storeSellerPhone: '',
          storeType: 1
        }
      )
      this.tableData = data.dataList
      this.totalCount = data.totalCount

      // 继续发送请求看看回来的数据还有没有子数据
      data.dataList.forEach((item) => {
        this.handleExpandChange({ storeId: item.storeId })
      })
    },
    handleCurrentChange(n) {
      this.pageNum = n
      this.getData()
    },
    handleSizeChange(n) {
      this.pageSize = n
      this.getData()
    },
    async handleExpandChange(row) {
      // console.log('展开了数据', data)
      const id = row.storeId
      const { data } = await this._axios.get(
        `/store/findchildstorelistbysjid/${id}`
      )
      this.tableData.forEach((item) => {
        if (item.storeId === id) {
          item.children = data
          item.hasChildren = true
        }
      })
      console.log(this.tableData)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  min-width: 800px;
}

h3 {
  height: 30px;
  line-height: 30px;
  background-color: #6c6c6c;
  border-radius: 0 10px 0 0;
  color: #fff;
  text-indent: 2em;
}
.store-list {
  h3 {
    background-color: #6c6c6c;
  }
  > .el-button {
    margin: 15px 20px 10px;
  }
}

.store-table {
  font-size: 12px;
  img {
    width: 30px;
    height: 30px;
  }
}

.el-pagination {
  float: right;
  margin: 30px 0 50px;
}

.settings .el-button {
  margin: 0;
  padding: 4px 6px;
  margin-right: 4px;
}
</style>
